<template>
	<view class="u-card" @tap.stop="click"
		:class="{ 'u-border': border, 'u-card-full': full, 'u-card--border': borderRadius > 0 }" :style="{
			borderRadius: borderRadius + 'rpx',
			margin: margin,
			boxShadow: boxShadow
		}">
		<view v-if="showHead" class="u-card__head" :style="[{padding: padding + 'rpx'}, headStyle]" :class="{
				'u-border-bottom': headBorderBottom
			}" @tap="headClick">
			<view v-if="!$slots.head" class="u-flex u-row-between">
<!-- 				<view class="u-card__head--left u-flex u-line-1" v-if="title">
					<image :src="thumb" class="u-card__head--left__thumb" mode="aspectfull" v-if="thumb" :style="{ 
							height: thumbWidth + 'rpx', 
							width: thumbWidth + 'rpx', 
							borderRadius: thumbCircle ? '100rpx' : '6rpx' 
						}"></image>
					<text class="u-card__head--left__title u-line-1" :style="{
							fontSize: titleSize + 'rpx',
							color: titleColor
						}">
						{{ title }}
					</text>
				</view> -->
				<view class="u-card__head--right u-line-1" v-if="subTitle">
					<text class="u-card__head__title__text" :style="{
							fontSize: subTitleSize + 'rpx',
							color: subTitleColor
						}">
						{{ subTitle }}
					</text>
				</view>
			</view>
			<slot name="head" v-else />
		</view>
		<view @tap="bodyClick" class="u-card__body" :style="[{padding: padding + 'rpx'}, bodyStyle]">
			<slot name="body" />
		</view>
<!-- 		<view v-if="showFoot" class="u-card__foot" @tap="footClick"
			:style="[{padding: $slots.foot ? padding + 'rpx' : 0}, footStyle]" :class="{
				'u-border-top': footBorderTop
			}">
			<slot name="foot" />
		</view> -->
	</view>
</template>

<script>
	/**
	 * card 卡片
	 * @description 卡片组件一般用于多个列表条目，且风格统一的场景
	 * @tutorial https://www.uviewui.com/components/card.html
	 * @property {Boolean} full 卡片与屏幕两侧是否留空隙（默认false）
	 * @property {String} title 头部左边的标题
	 * @property {String} title-color 标题颜色（默认#303133）
	 * @property {String | Number} title-size 标题字体大小，单位rpx（默认30）
	 * @property {String} sub-title 头部右边的副标题
	 * @property {String} sub-title-color 副标题颜色（默认#909399）
	 * @property {String | Number} sub-title-size 副标题字体大小（默认26）
	 * @property {Boolean} border 是否显示边框（默认true）
	 * @property {String | Number} index 用于标识点击了第几个卡片
	 * @property {String} box-shadow 卡片外围阴影，字符串形式（默认none）
	 * @property {String} margin 卡片与屏幕两边和上下元素的间距，需带单位，如"30rpx 20rpx"（默认30rpx）
	 * @property {String | Number} border-radius 卡片整体的圆角值，单位rpx（默认16）
	 * @property {Object} head-style 头部自定义样式，对象形式
	 * @property {Object} body-style 中部自定义样式，对象形式
	 * @property {Object} foot-style 底部自定义样式，对象形式
	 * @property {Boolean} head-border-bottom 是否显示头部的下边框（默认true）
	 * @property {Boolean} foot-border-top 是否显示底部的上边框（默认true）
	 * @property {Boolean} show-head 是否显示头部（默认true）
	 * @property {Boolean} show-head 是否显示尾部（默认true）
	 * @property {String} thumb 缩略图路径，如设置将显示在标题的左边，不建议使用相对路径
	 * @property {String | Number} thumb-width 缩略图的宽度，高等于宽，单位rpx（默认60）
	 * @property {Boolean} thumb-circle 缩略图是否为圆形（默认false）
	 * @event {Function} click 整个卡片任意位置被点击时触发
	 * @event {Function} head-click 卡片头部被点击时触发
	 * @event {Function} body-click 卡片主体部分被点击时触发
	 * @event {Function} foot-click 卡片底部部分被点击时触发
	 * @example <u-card padding="30" title="card"></u-card>
	 */
	export default {
		name: 'u-card',
		props: {
			// 与屏幕两侧是否留空隙
			full: {
				type: Boolean,
				default: false
			},
			// 标题
			title: {
				type: String,
				default: ''
			},
			// 标题颜色
			titleColor: {
				type: String,
				default: '#303133'
			},
			// 标题字体大小，单位rpx
			titleSize: {
				type: [Number, String],
				default: '30'
			},
			// 副标题
			subTitle: {
				type: String,
				default: ''
			},
			// 副标题颜色
			subTitleColor: {
				type: String,
				default: '#909399'
			},
			// 副标题字体大小，单位rpx
			subTitleSize: {
				type: [Number, String],
				default: '26'
			},
			// 是否显示外部边框，只对full=false时有效(卡片与边框有空隙时)
			border: {
				type: Boolean,
				default: true
			},
			// 用于标识点击了第几个
			index: {
				type: [Number, String, Object],
				default: ''
			},
			// 用于隔开上下左右的边距，带单位的写法，如："30rpx 30rpx"，"20rpx 20rpx 30rpx 30rpx"
			margin: {
				type: String,
				default: '30rpx'
			},
			// card卡片的圆角
			borderRadius: {
				type: [Number, String],
				default: '16'
			},
			// 头部自定义样式，对象形式
			headStyle: {
				type: Object,
				default () {
					return {};
				}
			},
			// 主体自定义样式，对象形式
			bodyStyle: {
				type: Object,
				default () {
					return {};
				}
			},
			// 底部自定义样式，对象形式
			footStyle: {
				type: Object,
				default () {
					return {};
				}
			},
			// 头部是否下边框
			headBorderBottom: {
				type: Boolean,
				default: true
			},
			// 底部是否有上边框
			footBorderTop: {
				type: Boolean,
				default: true
			},
			// 标题左边的缩略图
			thumb: {
				type: String,
				default: ''
			},
			// 缩略图宽高，单位rpx
			thumbWidth: {
				type: [String, Number],
				default: '60'
			},
			// 缩略图是否为圆形
			thumbCircle: {
				type: Boolean,
				default: false
			},
			// 给head，body，foot的内边距
			padding: {
				type: [String, Number],
				default: '30'
			},
			// 是否显示头部
			showHead: {
				type: Boolean,
				default: true
			},
			// 是否显示尾部
			showFoot: {
				type: Boolean,
				default: true
			},
			// 卡片外围阴影，字符串形式
			boxShadow: {
				type: String,
				default: 'none'
			}
		},
		data() {
			return {};
		},
		methods: {
			click() {
				this.$emit('click', this.index);
			},
			headClick() {
				this.$emit('head-click', this.index);
			},
			bodyClick() {
				this.$emit('body-click', this.index);
			},
			footClick() {
				this.$emit('foot-click', this.index);
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import "../../libs/css/style.components.scss";

	.u-card {
		position: relative;
		overflow: hidden;
		font-size: 28rpx;
		background-color: #ffffff;
		box-sizing: border-box;

		&-full {
			// 如果是与屏幕之间不留空隙，应该设置左右边距为0
			margin-left: 0 !important;
			margin-right: 0 !important;
			width: 100%;
		}

		&--border:after {
			border-radius: 16rpx;
		}

		&__head {
			&--left {
				color: $u-main-color;

				&__thumb {
					margin-right: 16rpx;
				}

				&__title {
					max-width: 400rpx;
				}
			}

			&--right {
				color: $u-tips-color;
				margin-left: 6rpx;
			}
		}

		&__body {
			color: $u-content-color;
		}

		&__foot {
			color: $u-tips-color;
		}
	}
</style>